<template>
  <div class="detailPage">
    <div class="option-box">
      <div class="opt-l">
        <preview :dataList="previewList"></preview>
      </div>
      <div class="opt-r">
        <div class="name">
          {{ detailData.name }}
        </div>
        <div class="desc">
          {{ detailData.desc }}
        </div>
        <div class="price-box">
          价格:
          <span>{{ detailData.sale_price }}</span>
          <span>
            {{ detailData.price }}
          </span>
        </div>
        <div class="num-box">
          <el-input-number
            v-model="num"
            controls-position="right"
            :min="1"
            :max="detailData.stock_num"
          ></el-input-number>
        </div>
        <div class="btn-box">
          <el-button type="danger" @click="addToCart">加入购物车</el-button>
        </div>
      </div>
    </div>
    <div class="detail">
      <h1>商品详情</h1>
      <div v-html="detailData.rich_text"></div>
    </div>
  </div>
</template>

<script>
import { getDetail, addCart } from "../api/index";
import preview from "../components/detail/preview";
export default {
  data() {
    return {
      detailData: {},
      previewList: [],
      tabActivIndex: 0,
      num: 0, // 购物车数量
    };
  },
  components: {
    preview,
  },
  created() {
    let id = this.$route.params.id;
    getDetail(id).then((res) => {
      console.log(res, 9999);
      this.detailData = res.data.result;
      this.previewList = res.data.result.s_goods_photos.map((el) => el.path);
    });
  },
  // computed: {
  //   tabPics() {
  //     return this.detail?.s_goods_photos?.map((el) => el.path) || [];
  //   },
  //   actPic() {
  //     return this.tabPics[this.tabActivIndex];
  //   },
  // },
  methods: {
    addToCart() {
      console.log("添加至购物车", this.num);
      console.log(addCart);
      let id = this.$route.params.id;
      addCart({
        goods_id: id,
        num: this.num,
      }).then(() => {
        this.$message({
          message: "加至购物车成功",
          type: "success",
          duration: 600,
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.detailPage {
  padding: 50px 10% 0;
  .option-box {
    display: flex;
    .opt-l {
      // border: 2px solid skyblue;
      box-shadow: 0 0 5px skyblue;
      border-radius: 10px;
      padding: 10px;
      width: 450px;
      height: 400px;
      .img-box {
        height: 70%;
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
      }
      .tab-box {
        height: 30%;
        .tab-item-box {
          border: 2px solid skyblue;
          width: 33%;
          float: left;
          height: 100%;
          background-size: contain;
          background-position: center;
          background-repeat: no-repeat;
        }
      }
    }
    .opt-r {
      font-size: 1px;
      padding: 0 30px;
      div {
        margin: 20px 0;
      }
      .name {
        font-size: 19px;
        font-weight: 700;
        cursor: pointer;
      }
      .desc {
        font-size: 14px;
        line-height: 16px;
        text-decoration: underline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        cursor: pointer;
      }
      .price-box {
        span {
          &:first-of-type {
            font-size: 30px;
            color: red;
          }
          &:last-of-type {
            font-size: 18px;
            color: gray;
            text-decoration: line-through;
          }
        }
      }
    }
  }
}
</style>